﻿@{
    ViewBag.Title = "Grid";
    Layout = "~/Views/Share/_Layout.cshtml";
}
@section css{

}
@section scripts{
    <script src="~/Content/grid/src/noke.grid.v1.2.js"></script>
    <script>
        $(function () {
            BindPager(DemoGridSetting());
            //if ($('.head').width() > $('.head').parent().width()) {
            //    $('.head').width($('.head').width() - 20);
            //}
        });
        var num = 28;
        function DemoGridSetting() {
            var setting = { id: "DemoGrid", key: "No", title: { label: 'Data Grid Title..' }, cols: [], toolbar: {}, checkbox : true, rowindex: false, data: [], pageindex: 1, pagesize: 20};
            setting.cols.push({ key: "No", type: "string", width: 80, label: "No" });
            for (var i = 1; i < num; i++) {
                setting.cols.push({ key: "No" + i, type: "string", width: (i % 2 == 0 ? 80 : 120), label: "Col" + i });
            }
            setting.pager = BindPager;

            setting.edit = { No3: {}};
            setting.edit.No3.editpanel = '<input type="text" style="width:200px;" />';
            return setting;
        }

        function GetDemoData(pageindex, pagesize, args, callback) {
            var data = [];
            var i = (pageindex - 1) * pagesize + 1;
            for (; i <= pageindex * pagesize; i++) {
                var a = { No: 100 * i };
                for (var j = 0; j < num; j++) { a["No" + j] = 'iRacer-' + i; }
                data.push(a);
            }
            callback(data);
        }

        function BindPager(setting, callback) {
            GetDemoData(setting.pageindex, setting.pagesize, setting, function (data) {
                setting.data = data;
                setting.total = 50;
                if (callback)
                    callback(setting);
                else
                    $('#' + setting.id).grid(setting);

            });
        }

        function GetChecked() {
            var res = $('#DemoGrid').grid().GetChecked();
             alert(res.ids.join(','));

        }
        function Get(id) {
            var res = $('#DemoGrid').grid().Get(id);
            alert(res);

        }
        function GetSetting() {
            var setting = $('#DemoGrid').grid().GetSetting();
            alert(setting);
        }

        // $('#' + setting.id).data('grid').settings
    </script>

}

<div class="row">    
    <div class="col-lg-12">
        
        <div id="DemoGrid" style=" height:500px;"></div>
        
        <input onclick="GetChecked()" value="Get checked items" class="form-control btn btn-primary" />
        <input onclick="Get(100)" value="Get item of No = 100" class="form-control btn btn-primary" />
        <input onclick="GetSetting()" value="Get setting" class="form-control btn btn-primary" />
        
       
    </div>
    <div class="col-lg-12">
    </div>
</div>



@section head{
        
    <div class="col-sm-4">
        <ol class="breadcrumb">
            <li>
                <a href="/">Home</a>
            </li>
            <li>
                <a href="/">UI&控件</a>
            </li>
            <li class="active">
                <strong>Grid</strong>
            </li>
        </ol>
    </div>

}